<template>
		<!-- 把组件标签 -->
	  <div>
		  <!-- 导航栏 -->
		  <div  style="justify-content: space-between;">
			  <alert>
				  <!-- 提示信息 -->
			  </alert>
			  <h1 align="center">学生成绩管理 Mark5- 【Vue2.5】</h1>
			  <div style="display: flex">
				<div style="width: 50%;display: flex;">
					<div style="width: 25%;">
					<button>首页</button></div>
					<div style="width: 25%;">
					<button @click="quit()">退出</button></div>
				</div>
				<div style="display: flex; width: 50%;">
					<div style="width: 30%;">
						身份：<span>{{doRole($store.state.user.role) }}</span>
					</div>
					<div style="width: 30%;">
						姓名：<span>{{$store.state.user.uname}}</span>
					</div>
					<div style="width: 30%;" v-if="($store.state.user.pic != null)">
						<img v-bind:src="`http://127.0.0.1:9000/api/public/showimg/${$store.state.user.pic}`"
						style="width: 5vw;height: 5vw">
					</div>
				</div>
			   
			  </div>
		  </div>
		  <hr >
		  <div style="display: flex; justify-content: space-between;">
		
			  <div style="width: 100%; ">
				<!--  -->
				  <router-view>
					  
				  </router-view>
			  </div>
		  </div>
	  </div>
</template>

<script setup>
import alert from "./components/Alert.vue"
</script>

<script>
	export default{
		name:'App',
		data() {
			
		},
		methods:{
			//显示身份
			doRole(role){
				console.log("身份方法："+role);
				if(role == 'stu'){return '学生';}
				if(role == 'tea'){return '教师';}
				if(role == 'adm'){return '管理员';}
				return '未登录';
			},
			//退出
			quit(){
				window.localStorage.clear();
				this.$store.state.user = 
				{uname:null,role:null,pic:null,token:null}
				this.$router.push("/login");
			}
		},
		mounted() {
			console.log("App初始化加载")
			
			this.$store.state.user.uname = 
			window.localStorage.getItem("uname");
			this.$store.state.user.role =
			window.localStorage.getItem("role");
			this.$store.state.user.pic =
			window.localStorage.getItem("pic");
			this.$store.state.user.token =
			window.localStorage.getItem("token");
			
			console.log(this.$store.state.user);
			
			let role = 'login';
			if( this.$store.state.user.role != null){
				role = this.$store.state.user.role
			}
			console.log("身份role:"+role);
			this.$router.push("/"+role);
		}
	}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
